<template><div><h2 id="单-复选框" tabindex="-1"><a class="header-anchor" href="#单-复选框"><span>单/复选框</span></a></h2>
<p>Dcat Admin 中文文档 /</p>
<h2 id="单-复选框-1" tabindex="-1"><a class="header-anchor" href="#单-复选框-1"><span>单/复选框</span></a></h2>
<h2 id="单选框" tabindex="-1"><a class="header-anchor" href="#单选框"><span>单选框</span></a></h2>
<p>通过 <code v-pre>Dcat\Admin\Widgets\Radio</code>类可以很方便地快速构建单选框表单。</p>
<h3 id="基本使用" tabindex="-1"><a class="header-anchor" href="#基本使用"><span>基本使用</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Radio</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 表单 name 属性</span></span>
<span class="line"><span class="token variable">$name</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'state'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 选项</span></span>
<span class="line"><span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">   <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'未处理'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'已处理'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'已拒绝'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$radio</span> <span class="token operator">=</span> <span class="token class-name static-context">Radio</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$options</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">check</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 选中第一个选项</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="https://cdn.learnku.com/uploads/images/202004/26/38389/Q8GjIW9KyN.png!large" alt=""></p>
<h3 id="显示在同一行-inline" tabindex="-1"><a class="header-anchor" href="#显示在同一行-inline"><span>显示在同一行 (inline)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Radio</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$name</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'state'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">   <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'未处理'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'已处理'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'已拒绝'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$radio</span> <span class="token operator">=</span> <span class="token class-name static-context">Radio</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$options</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">check</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">inline</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="https://cdn.learnku.com/uploads/images/202004/26/38389/aoTE8xwZEu.png!large" alt=""></p>
<h3 id="设置禁选的选项-disable" tabindex="-1"><a class="header-anchor" href="#设置禁选的选项-disable"><span>设置禁选的选项 (disable)</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Radio</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$name</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'state'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">   <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'未处理'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'已处理'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'已拒绝'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$radio</span> <span class="token operator">=</span> <span class="token class-name static-context">Radio</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$options</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">inline</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">disable</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="https://cdn.learnku.com/uploads/images/202004/26/38389/8Pf2f2sUi6.png!large" alt=""></p>
<h3 id="设置样式-style" tabindex="-1"><a class="header-anchor" href="#设置样式-style"><span>设置样式 (style)</span></a></h3>
<p>通过<code v-pre>style</code>方法可以设置单选框的样式，支持<code v-pre>primary</code>、<code v-pre>info</code>、<code v-pre>success</code>、<code v-pre>danger</code>。</p>
<h3 id="设置尺寸" tabindex="-1"><a class="header-anchor" href="#设置尺寸"><span>设置尺寸</span></a></h3>
<p>单选框支持3种尺寸，使用方法如下</p>
<p><code v-pre>small</code>设置为小尺寸</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$radio</span><span class="token operator">-></span><span class="token function">small</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>large</code>设置为大尺寸</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$radio</span><span class="token operator">-></span><span class="token function">large</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h2 id="复选框" tabindex="-1"><a class="header-anchor" href="#复选框"><span>复选框</span></a></h2>
<p>通过 <code v-pre>Dcat\Admin\Widgets\Checkbox</code>类可以很方便地快速构建复选框表单，并且复选框类是属于<code v-pre>Radio</code>的子类，因此用法与<code v-pre>Radio</code>类基本一致。</p>
<h3 id="基本用法" tabindex="-1"><a class="header-anchor" href="#基本用法"><span>基本用法</span></a></h3>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Checkbox</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 表单 name 属性，因为此处是多选，所以需要加上中括号</span></span>
<span class="line"><span class="token variable">$name</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'hobbies[]'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 选项</span></span>
<span class="line"><span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">   <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'唱'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'跳'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'RAP'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">4</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'打篮球'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$checkbox</span> <span class="token operator">=</span> <span class="token class-name static-context">Checkbox</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$options</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">inline</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">check</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 这里允许传递数组，默认选中多个选项</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>效果<br>
<img src="https://cdn.learnku.com/uploads/images/202004/26/38389/KBAtO6uYvb.png!large" alt=""></p>
<h3 id="全选" tabindex="-1"><a class="header-anchor" href="#全选"><span>全选</span></a></h3>
<p>通过<code v-pre>checkAll</code>方法可以选中全部选项。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Widgets<span class="token punctuation">\</span>Checkbox</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 表单 name 属性，因为此处是多选，所以需要加上中括号</span></span>
<span class="line"><span class="token variable">$name</span> <span class="token operator">=</span> <span class="token string single-quoted-string">'hobbies[]'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token comment">// 选项</span></span>
<span class="line"><span class="token variable">$options</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">   <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'唱'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'跳'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'RAP'</span><span class="token punctuation">,</span></span>
<span class="line">   <span class="token number">4</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'打篮球'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$checkbox</span> <span class="token operator">=</span> <span class="token class-name static-context">Checkbox</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$options</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">inline</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">checkAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 全部选中</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>checkAll</code>方法也允许全选的同时排除指定选项。</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$checkbox</span> <span class="token operator">=</span> <span class="token class-name static-context">Checkbox</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token variable">$options</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">inline</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line">    <span class="token operator">-></span><span class="token function">checkAll</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 全部选中，但是排除key为1和3的选项</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="更多用法" tabindex="-1"><a class="header-anchor" href="#更多用法"><span>更多用法</span></a></h3>
<p>更多用法与<code v-pre>Radio</code>的用法一致，这里不再赘述。</p>
</div></template>


